import { DICT } from '../../dict/dict';
import type { PopupPosition, Pos } from '../popup/popup';
import { Selector } from '../selector/selector';
import { pickColorStyle } from './colorPicker.css';

export type ColorPickerOptions = {
	refer?: HTMLElement;
	color?: string;
	useAction?: boolean;
	width?: string | number;
	popupPosition?: PopupPosition | Pos;
};

export interface ColorPickerSelectHandler {
	close(): void;
	onSelect(callback: SelectColorCallback): this;
	onClose(callback: () => void): this;
}

export type SelectColorCallback = (color: string) => void;

const COLOR_TABLE = [
	[
		'FFFFFF',
		'000000',
		'E7E6E6',
		'FF0000',
		'FF7F00',
		'FFFF00',
		'00FF00',
		'00FFFF',
		'0000FF',
		'8B00FF',
	],
	[
		'F1F1F1',
		'7F7F7F',
		'CFCECE',
		'FFCDCD',
		'FFCCCD',
		'FFFFCD',
		'CDFFCD',
		'CDFFFF',
		'CDCDFF',
		'D1CDFF',
	], // dark: 100%, light: 80%
	[
		'D7D7D7',
		'595959',
		'AEAAAA',
		'FF9A9A',
		'FFB29A',
		'FFFF9A',
		'9AFF9A',
		'9AFFFF',
		'9A9AFF',
		'B99AFF',
	], // dark: 100%, light: 60%
	[
		'BEBEBE',
		'3F3F3F',
		'757070',
		'FF6666',
		'FF9966',
		'FFFF66',
		'66FF66',
		'66FFFF',
		'6666FF',
		'A266FF',
	], // dark: 100%, light: 40%
	[
		'A4A4A4',
		'262626',
		'3A3737',
		'C00000',
		'C06000',
		'C0C000',
		'00C000',
		'00C0C0',
		'0000C0',
		'6800C0',
	], // dark: 25%, light: 100%
	[
		'7E7E7E',
		'0C0C0C',
		'171616',
		'800000',
		'804000',
		'808000',
		'008000',
		'008080',
		'000080',
		'460080',
	],
];

export const ColorPicker = {
	show({
		refer,
		useAction = false,
		width = '18em',
		popupPosition = 'bottom-left',
	}: ColorPickerOptions = {}): ColorPickerSelectHandler {
		let onClose: (() => void) | undefined;
		let onSelect: SelectColorCallback | undefined;
		const selectColor = (color: string) => {
			onSelect?.(color);
			pop.close();
			setTimeout(() => {
				refer?.focus();
			});
		};

		const defaultTd = (
			<td
				colSpan={10}
				tabIndex={0}
				onMouseDown={function (evt) {
					evt.preventDefault();
					evt.stopImmediatePropagation();
					this.focus();
					selectColor('');
				}}
			>
				{DICT.default}
			</td>
		) as HTMLTableCellElement;
		const container = (
			<table
				class={pickColorStyle}
				onMouseDown={(evt) => {
					evt.preventDefault();
					evt.stopImmediatePropagation();
				}}
			>
				<tr style={{ marginBottom: '0.5em' }}>{defaultTd}</tr>
				{new Array(6).fill(0).map((_, r) => {
					return (
						<tr>
							{new Array(10).fill(0).map((_, c) => {
								const color = '#' + COLOR_TABLE[r][c];
								return (
									<td
										onMouseDown={function (evt) {
											evt.preventDefault();
											evt.stopImmediatePropagation();
											this.focus();
											selectColor(color);
										}}
										tabIndex={0}
										style={{
											backgroundColor: color,
										}}
									/>
								);
							})}
						</tr>
					);
				})}
			</table>
		) as HTMLTableElement;
		const pop = Selector.show(container, {
			refer,
			popupPosition,
			useAction,
			width,
			noActionBar: true,
		})
			.onOpen(() => {
				defaultTd.focus();
			})
			.onClose(() => {
				onClose?.();
			});
		return {
			close() {
				pop.close();
			},
			onSelect(callback) {
				onSelect = callback;
				return this;
			},
			onClose(callback) {
				onClose = callback;
				return this;
			},
		};
	},
};
